import React, { Component } from 'react';
import { array } from 'prop-types';
import Image from 'react-uwp/Image';

export default class Local extends Component {
  // static propTypes = {
  //     experienceList: array.isRequired
  // };
  LocalItem(item, index) {
    let style = {};
    if (index < 3) {
      style = { width: '15.2rem', height: '10.16rem' };
    } else if (index == 3) {
      style = { width: '31.6rem', height: '15.2rem' };
    } else {
      style = { width: '15.2rem', height: '15.2rem' };
    }
    Object.assign(style, {
      position: 'relative',
      overflow: 'hidden',
      marginBottom: '1.2rem'
    });
    return (
      <div key={index} style={style} className="recomdItem">
        <Image
          src={item.url}
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          className="recomdImg"
        />
        <div className="dfcc wh100 recomdInfo">
          <div className="mask" />
          <div className=" wh100 recomdText">
            <span className="f24 cff" style={{ padding: '0.8rem' }}>
              {item.title}
            </span>
          </div>
        </div>
      </div>
    );
  }
  render() {
    let { experienceList } = this.props;
    return (
      <div className="dfc">
        <div className="dfrcb">
          {experienceList
            .slice(0, 3)
            .map((item, index) => this.LocalItem(item, index))}
        </div>
        <div className="dfrcb">
          {experienceList
            .slice(3, 5)
            .map((item, index) => this.LocalItem(item, index + 3))}
        </div>
      </div>
    );
  }
}
